<template>
    <div>
        <el-row>
            <el-col :span="5">
                <div class="grid-content bg-purple">
                   <DeptZtree ref="refDeptZtree" @zTreeClick="zTreeBack"></DeptZtree>
                </div>
            </el-col>

            <el-col :span="1">
                <el-divider direction="vertical"></el-divider>
            </el-col>

            <el-col :span="18">
                <div class="grid-content bg-purple-light" style="margin-top: 30px">
                    <el-form :inline="true" :model="formObj" class="demo-form-inline" >
                        <el-form-item>
                            <el-input v-model="formObj.name" placeholder="部门名称"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="page">查询</el-button>
                            <el-button type="primary" icon="el-icon-bottom">高级搜索</el-button>
                        </el-form-item>
                    </el-form>
                    <ElementTable ref="pageTable"
                                  :pageColumns="pageColumns"
                                  :optBtn="optBtn"
                                  :btnList="btnList"
                                  :optWidth=130
                                  :url="url"
                                  :formObject="formObj"
                                  :loading="loading"
                                  @optClick="optClick"
                                  @btnListClick="btnListClick">

                    </ElementTable>
                </div>
            </el-col>
        </el-row>
    </div>

    <SysDeptEdit ref="refSysDeptEdit" @page="search"></SysDeptEdit>

</template>

<script>
    import DeptZtree from './DeptZtree'
    import SysDeptEdit from './SysDeptEdit'
    import ElementTable from '../../../components/base/ElementTable'
    export default {
        name: "SysDept",
        components:{
            DeptZtree,
            SysDeptEdit,
            ElementTable
        },
        mounted() {
            this.$refs.refDeptZtree.initTree()
            this.page()
        },
        data(){
            return{
                formObj:{
                    name:undefined,
                    pid:undefined
                },
                loading:true,
                pageColumns:[
                    {key:'name',title:'部门名称',width:200},
                    {key:'uname',title:'创建人',width:200},
                    {key:'parentName',title:'上级部门',width:160},
                    {key:'remark',title:'备注',width:160}
                ],
                btnList:[
                    {icon:'el-icon-plus',type:'primary',name:'新增部门',id:''}
                ],
                optBtn:[
                    {icon:'el-icon-edit',name:'编辑',id:''},
                    {icon:'el-icon-delete',name:'删除',id:''},
                ],
                url:'/api/sys_dept/page'
            }
        },
        methods:{
            btnListClick(name){
                switch (name) {
                    case '新增部门':
                        this.edit()
                        break
                }
            },
            search(){
                this.page()
                this.$refs.refDeptZtree.initTree()
            },
            optClick(data){
                switch (data.name) {
                    case '编辑':
                        this.edit(data.obj)
                        break
                    case 'selectData':
                        let ids = []
                        if (data.obj.length==0){
                            this.selectIds=[]
                        }else {
                            data.obj.forEach(function (item,value) {
                                ids[value]=item.id
                            })
                        }
                        this.selectIds = ids
                        break
                }
            },
            page(){
                this.$refs.pageTable.page()
            },
            edit(){
                this.$refs.refSysDeptEdit.open()
            },
            zTreeBack(data){

            },
        }
    }
</script>

<style scoped>
    .el-divider--vertical{
        display:inline-block;
        width:1px;
        height:100%;
        margin:0 8px;
        vertical-align:middle;
        position:relative;
    }

</style>